<template>
  <view class="custom-tab-bar-wrapper">
    <view class="custom-tab-bar">
      <view class="tab-item" v-for="(item, index) in list" :key="index" @click="switchTab(item, index)">
        <!-- <image :src="selected === index ? item.selectedIconPath : item.iconPath" mode="aspectFit" /> -->
        <text :class="{ active: selected === index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>

import { getTabBarList } from "@/api/index.js"
export default {
  data() {
    return {
      selected: 0,
      list: [
        // {
        //   pagePath: '/pages/index',
        //   // iconPath: '/static/images/tabbar/home.png',
        //   // selectedIconPath: '/static/images/tabbar/home_.png',
        //   text: '首页'
        // },
        // {
        //   pagePath: "/pages/stationInfo/index",
        //   text: "站务信息"
        // },
        // {
        //   pagePath: "/pages/stationFormula/index",
        //   text: "站务公式"
        // },
        // {
        //   pagePath: "/pages/stationButy/index",
        //   text: "岗位职责"
        // },
        // {
        //   pagePath: "/pages/addressBook/index",
        //   text: "通讯名录"
        // },
        // {
        //   pagePath: "/pages/stationAssess/index",
        //   text: "站内考核"
        // },
        // {
        // pagePath: '/pages/work/index',
        // iconPath: '/static/images/tabbar/work.png',
        // selectedIconPath: '/static/images/tabbar/work_.png',
        // text: '工作台'
        // },
        // {
        // pagePath: '/pages/mine/index',
        // iconPath: '/static/images/tabbar/mine.png',
        // selectedIconPath: '/static/images/tabbar/mine_.png',
        // text: '我的'
        // }
      ],
    }
  },

  created() {
    // 监听页面切换
    uni.$on('tabChange', () => {
      this.watchRoute()
    })
    this.getTabBar()
  },


  destroyed() {
    uni.$off('tabChange')
  },
  methods: {

    getTabBar() {
      getTabBarList().then(res => {
        if (Array.isArray(res)) {
          this.list = res.map(item => ({
            pagePath: item.trunLink,
            text: item.title,
            id: item.id,
          }))
        } else {
          this.list = []
        }
        this.$nextTick(() => {
          this.watchRoute()
        })
      }).catch(() => {
        this.list = []
        this.$nextTick(() => {
          this.watchRoute()
        })
      })
    },

    async switchTab(item, ind) {
      console.log(item);
      
      if (this.loading) return // 数据没加载好禁止点击

      if (!item.pagePath) {
        uni.showToast({ title: '页面路径不存在', icon: 'none' })
        return
      }

      this.$emit('tabSelected', {
        item: item,
        index: ind,
        id: item.id
      })

      await uni.switchTab({
        url: item.pagePath
      })
      setTimeout(() => {
        uni.$emit('tabChange')
      }, 100)
    },

    watchRoute() {
      if (!Array.isArray(this.list)) return;
      const pages = getCurrentPages();
      if (!pages.length) return; // 页面栈为空
      const currentPage = pages[pages.length - 1];
      if (!currentPage || !currentPage.route) return; // 防止currentPage为undefined
      const url = `/${currentPage.route}`;
      const selected = this.list.findIndex(item => item.pagePath === url);
      if (selected > -1) {
        this.selected = selected;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tab-bar-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  // padding-bottom: constant(safe-area-inset-bottom);
  background-color: transparent;
}

.custom-tab-bar {
  width: calc(100vw * 2050 / 2560);
  height: calc(100vw * 140 / 2560);
  // background: rgba(105, 126, 228, 0.9);
  background: url('../static/images/tabbar/bg_nav@2x.png') no-repeat center center;
  background-position: 100% 100%;
  background-size: cover;
  padding: 0 calc(100vw * 60 / 2560);
  box-sizing: border-box;
  border-radius: calc(100vw * 15 / 2560) calc(100vw * 15 / 2560) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 0 calc(100vw * 10 / 2560) rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: (100vw * 20 / 2560);
}

.tab-item text {
  font-size: (100vw * 51 / 2560);
  color: #99A4D3;
}

.active {
  color: #fff !important;
  width: (100vw * 229 / 2560);
  height: (100vw * 120 / 2560);
  background: url('@/static/images/tabbar/sel@2x.png') no-repeat center center;
  background-size: contain;
  margin-top: calc(100vw * 17 / 2560);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>